<template>
  <div class="container" v-if="list">
    <div class="page-title">滑动组件</div>
    <ul>
      <li class="list-item" v-for="(item, index) in list" data-type="0" :key="index">
        <div
          class="list-box"
          @touchstart.capture="touchStart"
          @touchend.capture="touchEnd"
          @click="skip"
        >
          <img class="list-img" :src="item.imgUrl" alt="" />
          <div class="list-content">
            <p class="title">{{ item.title }}</p>
            <p class="tips">{{ item.tips }}</p>
            <p class="time">{{ item.time }}</p>
          </div>
        </div>
        <div class="delete" @click="deleteItem" :data-index="index">删除</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "del",
  data() {
    return {
      list: [],
    };
  },
};
</script>

<style>
 .page-title {
  text-align: center;

  font-size: 17px;

  padding: 10px 15px;

  position: relative;
}

.page-title:after {
  content: " ";

  position: absolute;

  left: 0;

  bottom: 0;

  right: 0;

  height: 1px;

  border-bottom: 1px solid #ccc;

  color: #ccc;

  -webkit-transform-origin: 0 100%;

  transform-origin: 0 100%;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

  z-index: 2;
}

.list-item {
  position: relative;

  height: 1.6rem;

  -webkit-transition: all 0.2s;

  transition: all 0.2s;
}

.list-item[data-type="0"] {
  transform: translate3d(0, 0, 0);
}

.list-item[data-type="1"] {
  transform: translate3d(-2rem, 0, 0);
}

.list-item:after {
  content: " ";

  position: absolute;

  left: 0.2rem;

  bottom: 0;

  right: 0;

  height: 1px;

  border-bottom: 1px solid #ccc;

  color: #ccc;

  -webkit-transform-origin: 0 100%;

  transform-origin: 0 100%;

  -webkit-transform: scaleY(0.5);

  transform: scaleY(0.5);

  z-index: 2;
}

.list-box {
  padding: 0.2rem;

  background: #fff;

  display: flex;

  align-items: center;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  justify-content: flex-end;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  font-size: 0;
}

.list-item .list-img {
  display: block;

  width: 1rem;

  height: 1rem;
}

.list-item .list-content {
  padding: 0.1rem 0 0.1rem 0.2rem;

  position: relative;

  flex: 1;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  overflow: hidden;
}

.list-item .title {
  display: block;

  color: #333;

  overflow: hidden;

  font-size: 15px;

  font-weight: bold;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.list-item .tips {
  display: block;

  overflow: hidden;

  font-size: 12px;

  color: #999;

  line-height: 20px;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.list-item .time {
  display: block;

  font-size: 12px;

  position: absolute;

  right: 0;

  top: 0.1rem;

  color: #666;
}

.list-item .delete {
  width: 2rem;

  height: 1.6rem;

  background: #ff4949;

  font-size: 17px;

  color: #fff;

  text-align: center;

  line-height: 1.6rem;

  position: absolute;

  top: 0;

  right: -2rem;
}
</style>
</style>